<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-06 16:33:43
 *@version: V1.0.5
-->
<template>
  <div :class="['col', ...colClass]" :style="colStyle">
        <slot></slot>
  </div>
</template>

<script>
export default {
  name:'LmCol',
  props: {
      span:{
          type:[String,Number],
          default(){
              return 24
          }
      },
      offset:{
          type:[String,Number],
          default(){
              return 0
          }
      },
      xs:{
          type:[String,Number,Object],
          default(){
              return null
          }
      },
      sm:{
          type:[String,Number,Object],
          default(){
              return null
          }
      },
      md:{
          type:[String,Number,Object],
          default(){
              return null
          }
      },
      lg:{
          type:[String,Number,Object],
          default(){
              return null
          }
      },
      xl:{
          type:[String,Number,Object],
          default(){
              return null
          }
      }
  },
  data() {
    return {
        gutter:0
    };
  },
  methods: {
    TransformColClass(item,name){   
        let arr = []
        if(typeof item === 'string' || typeof item === 'number'){
            arr.push(`${name}-${item}`)
        }else if(Object.prototype.toString.call(item) === "[object Object]"){
            if(item.span){
                arr.push(`${name}-${item.span}`)
            }
            if(item.offset){
                arr.push(`offset-${name}-${item.offset}`)
            }
            return arr
        }
        return arr
    }  
  },
  computed: {
      colClass(){
          let {span, offset, xs, sm, md, lg, xl} = this
          return [
              span && `col-${span}`,
              offset && `offset-${offset}`,
              ...this.TransformColClass(xs,'xs'),
              ...this.TransformColClass(sm,'sm'),
              ...this.TransformColClass(md,'md'),
              ...this.TransformColClass(lg,'lg'),
              ...this.TransformColClass(xl,'xl'),
            ]
      },
      colStyle(){
          let gutter = `${this.gutter / 2}px`
          return {
              paddingLeft: gutter,
              paddingRight: gutter
          }
      }
  }
};
</script>

<style lang="scss" scoped>
.col{
    // 获取当前class 前缀
    $class-prefix: col-;
    @for $n from 1 through 24 {
        &.#{$class-prefix}#{$n}{
            width: ($n / 24) * 100%;
        }
    }
    $class-prefix: offset-;
    @for $n from 1 through 24 {
        &.#{$class-prefix}#{$n}{
            margin-left: ($n / 24) * 100%;
        }
    }

    // xs 前缀
    @media (max-width:768px) {
        $class-prefix: xs-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                width: ($n / 24) * 100%;
            }
        }
        $class-prefix: offset-xs-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                margin-left: ($n / 24) * 100%;
            }
        }
    }

    // sm 前缀
    @media (min-width:768px) and (max-width: 992px) {
        $class-prefix: sm-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                width: ($n / 24) * 100%;
            }
        }
        $class-prefix: offset-sm-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                margin-left: ($n / 24) * 100%;
            }
        }
    }

    // md 前缀
    @media (min-width:992px) and (max-width: 1200px) {
        $class-prefix: md-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                width: ($n / 24) * 100%;
            }
        }
        $class-prefix: offset-md-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                margin-left: ($n / 24) * 100%;
            }
        }
    }

    // lg 前缀
    @media (min-width:1200px) and (max-width: 1920px) {
        $class-prefix: lg-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                width: ($n / 24) * 100%;
            }
        }
        $class-prefix: offset-lg-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                margin-left: ($n / 24) * 100%;
            }
        }
    }

    // xl 前缀
    @media (min-width:1920px) {
        $class-prefix: xl-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                width: ($n / 24) * 100%;
            }
        }
        $class-prefix: offset-xl-;
        @for $n from 1 through 24 {
            &.#{$class-prefix}#{$n}{
                margin-left: ($n / 24) * 100%;
            }
        }
    }
}
</style>
